<template>
  <el-dialog :modelValue="visiable" title="新增" width="600" @closed="emit('closed')">
    <!-- 牵引顺序 -->
    <div class="pb-2 flex items-center justify-around border-b-[1px]">
      <div class="flex justify-center items-center gap-2">
        <div class="text-xl">N1000</div>
        <el-tag>张力场</el-tag>
      </div>
      <div class="rounded-full border-blue-300 border p-1 cursor-pointer">
        <Switch theme="outline" size="16" />
      </div>
      <div class="flex justify-center items-center gap-2">
        <div class="text-lg">N1000</div>
        <el-tag>牵引场</el-tag>
      </div>
    </div>

    <!-- 引绳 -->
    <div class="grid grid-cols-2 items-end border-b-[1px] pb-1 h-10">
      <div class="flex justify-start items-center gap-4">
        <el-text>导引绳:</el-text>
        <el-tag>LGJ-400/50</el-tag>
      </div>
      <div class="flex justify-start items-center gap-4">
        <el-text>牵引绳:</el-text>
        <el-tag>28</el-tag>
      </div>
    </div>

    <!-- 摩阻系数/展放数量 -->
    <div class="grid grid-cols-2 items-end border-b-[1px] pb-1 h-10">
      <div class="flex justify-start items-center gap-4">
        <el-text>摩擦系数:</el-text>
        <el-tag>1.015</el-tag>
      </div>
      <div class="flex justify-start items-center gap-4">
        <el-text>展放数量:</el-text>
        <el-tag>1</el-tag>
      </div>
    </div>

    <el-button type="primary" @click="onSubmit" class="w-full mt-2">新增</el-button>
  </el-dialog>
</template>

<script lang="ts" setup>
import { orderModel } from '@/types/model'
import { Switch } from '@icon-park/vue-next'
import { ref } from 'vue'

const { visiable } = defineProps<{
  visiable: boolean
  sectionId: number
}>()
const emit = defineEmits(['closed'])

const addOrder = ref<orderModel>({
  orderName: '--',
  isStraight: true,
  moZuNum: 1.015,
  wireNum: 1,
  daoYinWireId: 1,
  qianYinWireId: 1,
  qianYinTowerId: 1,
  zhangLiTowerId: 1,
  sectionId: 1,
})

const onSubmit = () => {}
</script>
